<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>title</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/bootstrap-paginator.js"></script>
</head>

<body>
<div class="container">
    <div th:replace="common/head.html"></div>
    <div th:replace="common/menu.html"></div>
    <div th:replace="common/nav.html"></div>

    <button class="btn btn-primary btn-sm" id="toAdd">添加数据字典类别</button>
    <div class="row-fluid" id="data_refresh" th:fragment="data_refresh">
        <table class="table table-striped" style="margin-top:15px">
            <thead class="thead-dark">
            <tr>
                <th scope="col" class="text-center">序号</th>
                <th scope="col" class="text-center">数据字典类别名称</th>
                <th scope="col" class="text-center">备注</th>
                <th scope="col" class="text-center">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr th:each="ddtInfo,iterStat : ${dicTypeInfList}" class="text-center">
                <td scope="row" th:utext="${iterStat.index+1}"></td>
                <td th:utext="${ddtInfo.TypeName}"></td>
                <td th:utext="${ddtInfo.TypeDesc}"></td>
                <td class="d-flex flex-row justify-content-around">
                    <input class="btn btn-primary btn-sm" th:onclick="toModify([[${ddtInfo.TypeID}]])"
                           type="button" value="修改">
                    <input class="btn btn-danger btn-sm" data-toggle="modal" data-target="#confirmDel"
                           th:onclick="toDelete([[${ddtInfo.TypeID}]])"  type="button" value="删除">
                </td>
            </tr>
            </tbody>
        </table>

        <div id="pageDiv"></div>
        <script type="text/javascript" th:inline="javascript">
            var TotalPage = [[${TotalPage}]];
            var offset = [[${offset}]];
            paginator.init("pageDiv", TotalPage, "offset", false);
            paginator.show(offset);
        </script>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="confirmDel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- 定义隐藏Input存储值 -->
                <input type="hidden" id="delDicTypeID">

                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>您确定删除该数据字典类别信息？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger delDicTypeInfBtn" data-dismiss="modal">删除</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="sucModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除成功</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>指定的数据字典类别信息现已删除成功！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="DBErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">数据库错误</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>数据库写入数据出现问题，请联系管理员进行维护！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="inpNullErr">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">空数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>删除的数据字典类别编号为空，请重试！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/DataDicTypePage.js"></script>
</html>
